<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<title>miaobiao</title>
	<meta charset='UTF-8'>
	<style type='text/css'>
		#div{ width:350px;height:503px;border:solid 1px #000000;margin:50px auto; }
		#title{ width:348px;height:45px;text-align:center;font-size:25px;line-height:45px; }
		#input{ width:346px;height:60px;font-size:30px;text-align:center;color:red; }
		#start,#pause,#stop{ width:110px;height:60px;font-size:20px;}
		#bottom{ width:348px;height:328px; }
		.ndiv{ width:346px;height:49px;font-size:25px;text-align:center;line-height:49px; }
	</style>
	<script type='text/javascript'>
		window.onload = function(){
			var start = document.getElementById('start');
			var pause = document.getElementById('pause');
			var stop = document.getElementById('stop');
			var input = document.getElementById('input');
			var bottom = document.getElementById('bottom');
			
			
			var se,m=0,s=0,ss=0,a,b,c='毫秒',q='0',t;
			start.onclick = function (){
				this.disabled = true;
				bottom.innerHTML = null;//清除bottom内容
				
				se = setInterval(function(){
					if(ss==1){s++;ss=0;}//控制时间周期
					if(s>0 && s==60){m++;s=0;}
					
					if(s>=0&&m<10){a='分0'};//控制跳动
					if(s>=10&&m<60){a='分'};
					if(ss>=0&&ss<10){b='秒0';}
					if(ss>=10&&ss<100){b='秒';};
					
					if(m>=0&&m<10){
						 t = q+m+a+s+b+ss+c;
					}else{
						 t = m+a+s+b+ss+c;
					}
					input.value = t;
					ss++;
				},1);
			}
			
			var i =1;
			pause.onclick = function(){//
				if(ss>0&&i<7){//限制记录状态和序列
					var ndiv = document.createElement('div');//创建div
					ndiv.innerHTML = i+"       "+input.value;
					ndiv.className = 'ndiv';
					bottom.appendChild(ndiv);
					i++;
				}
			}
			stop.onclick = function(){
				start.disabled = false;
				clearInterval(se);//暂停时间
				m=0,s=0,ss=0,i=1;//清除时间、序列
			}
		}
	</script>
 </head>
 <body>
  	<div id='div'>
  		<div id='title'>简易秒表</div>
		<button id='start'>开始</button>
		<button id='pause'>记录</button>
		<button id='stop' >停止</button>
		<input id='input' value='00分00秒00毫秒' readonly='readonly'/>
		<div id='bottom'></div>
  	</div>
 </body>
</html>
